<!-- eslint-disable vue/require-v-for-key -->
<template>
  <div class="screen-top-center">
    <!-- <div class="top-center-data">
      <div class="data-item" v-for="(item, index) in state.dataList" v-key="index">
        <p class="data-item-title">{{ item.title }}</p>

        <dv-digital-flop class="dv-digital-flop" :config="item.config" />
      </div>
    </div> -->
    <div class="top-center-chart">
      <div class="chart-item">
        <!-- <div class="screen-top-header flex-l">
          <div class="header-left flex-c">
            <i class="iconfont icon-zhibiao2"></i>
          </div>
          <div class="header-right flex-l">
            <span class="header-title" @click="$router.push('/')"
              >本月上传视频质量不达标班组排行</span
            >
            <dv-decoration-3 class="dv-dec-3" />
          </div>
        </div> -->
        <dv-scroll-ranking-board class="dv-scr-rank-board" :config="upVideoConfig" />
        <!-- <ScrollRankingBoard class="dv-scr-rank-board" :config="upVideoConfig" /> -->
      </div>
      <!-- <div class="chart-item">
        <div class="screen-top-header flex-l">
          <div class="header-left flex-c">
            <i class="iconfont icon-cloudupload"></i>
          </div>
          <div class="header-right flex-l">
            <span class="header-title">本月违章查处明细</span>
            <dv-decoration-3 class="dv-dec-3" />
          </div>
        </div>
        <div class="pond-section">
          <dv-water-level-pond class="dv-water-level-pond" :config="state.completeObj" />
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, onUnmounted } from 'vue'
import { getQualityReportRankingApi } from '@/api/screen'
import ScrollRankingBoard from '../scrollRankingBoard/scrollRankingBoard.vue'
// const state = reactive({
//   dataList: [
//     {
//       title: '累计查处数',
//       value: 755,
//       config: {
//         number: [755],
//         toFixed: 0,
//         content: '{nt}',
//         textAlign: 'left',
//         style: {
//           fontSize: 24
//         }
//       }
//     },
//     {
//       title: '本月累计查处数',
//       value: 3288,
//       config: {
//         number: [3288],
//         toFixed: 0,
//         content: '{nt}',
//         textAlign: 'left',
//         style: {
//           fontSize: 24
//         }
//       }
//     },
//     {
//       title: '本周累计查处数',
//       value: 14222,
//       config: {
//         number: [14222],
//         toFixed: 0,
//         content: '{nt}',
//         textAlign: 'left',
//         style: {
//           fontSize: 24
//         }
//       }
//     },
//     {
//       title: '季度累计查处数',
//       value: 41022,
//       config: {
//         number: [41022],
//         toFixed: 0,
//         content: '{nt}',
//         textAlign: 'left',
//         style: {
//           fontSize: 24
//         }
//       }
//     },
//     {
//       title: '年度累计查处数',
//       value: 176888,
//       config: {
//         number: [176888],
//         toFixed: 0,
//         content: '{nt}',
//         textAlign: 'left',
//         style: {
//           fontSize: 24
//         }
//       }
//     },
//     {
//       title: '今日累计查处数',
//       value: 820,
//       config: {
//         number: [820],
//         toFixed: 0,
//         content: '{nt}',
//         textAlign: 'left',
//         style: {
//           fontSize: 24
//         }
//       }
//     }
//   ],
//   completeObj: {
//     data: [45, 56],
//     shape: 'round'
//   },
//   rankList: {
//     data: [
//       {
//         name: '班组1',
//         value: 12
//       },
//       {
//         name: '班组2',
//         value: 9
//       },
//       {
//         name: '班组3',
//         value: 8
//       },
//       {
//         name: '班组4',
//         value: 6
//       },
//       {
//         name: '班组5',
//         value: 5
//       },
//       {
//         name: '班组6',
//         value: 4
//       },
//       {
//         name: '班组7',
//         value: 3
//       },
//       {
//         name: '班组8',
//         value: 2
//       },
//       {
//         name: '班组9',
//         value: 2
//       },
//       {
//         name: '班组10',
//         value: 1
//       }
//     ],
//     carousel: 'single',
//     unit: '条'
//   },
//   intervalInstance: 0
// })
const upVideoConfig = reactive({
  carousel: 'single',
  unit: '条',
  rowNum: 8,
  data: [
    // {
    //   name: '班组1',
    //   value: 12
    // },
    // {
    //   name: '班组2',
    //   value: 9
    // },
    // {
    //   name: '班组3',
    //   value: 8
    // },
    // {
    //   name: '班组4',
    //   value: 6
    // },
    // {
    //   name: '班组5',
    //   value: 5
    // },
    // {
    //   name: '班组6',
    //   value: 4
    // },
    // {
    //   name: '班组7',
    //   value: 3
    // },
    // {
    //   name: '班组8',
    //   value: 2
    // },
    // {
    //   name: '班组9',
    //   value: 2
    // },
    // {
    //   name: '班组10',
    //   value: 1
    // },
    // {
    //   name: '班组9',
    //   value: 2
    // },
    // {
    //   name: '班组10',
    //   value: 1
    // }
  ]
})

const getQualityReportRanking = async () => {
  const res = await getQualityReportRankingApi()
  if (res.data.length === 0) return
  upVideoConfig.data = res.data?.map((e: any) => {
    return {
      name: e.depName,
      value: e.count
    }
  })
}

getQualityReportRanking()

onMounted(() => {
  // changeTiming()
})

// onUnmounted(() => {
//   // window.clearInterval(state.intervalInstance)
// })

// const changeTiming = () => {
//   state.intervalInstance = window.setInterval(() => {
//     changeNumber()
//     // changeCompleteObj();
//   }, 2000)
// }

// const changeNumber = () => {
//   state.dataList.forEach((item, _index) => {
//     item.value += 1
//     item.config.number[0] += 1
//     item.config = { ...item.config }
//   })
// }

// const changeCompleteObj = () => {
//     let list = state.completeObj.data;
//     let pondDown = list[0];
//     let pondUp = list[1];
//     pondDown += 1;
//     pondUp += 1;
//     if (pondUp === 100) {
//         pondUp = 40;
//         pondDown = 33;
//     }
//     state.completeObj.data = [pondDown, pondUp];
// }
</script>

<style lang="scss" scoped>
@import '/src/assets/scss/common/variables.scss';
.flex-l {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.screen-top-center {
  // height: $box-height3;
  // width: $box-width3;
  // background-color: $theme-sub-color;
  margin: 5px;
  border-radius: 5px;

  // .top-center-data {
  //   height: 40%;
  //   display: grid;
  //   grid-template-columns: 1fr 1fr 1fr;
  //   grid-gap: 5px;
  //   padding: 5px;

  //   .data-item {
  //     background-color: $theme-sub-color;
  //     padding: 0 10px;

  //     .data-item-title {
  //       color: #fff;
  //       font-size: $base-font-size;
  //       margin-top: 10px;
  //     }

  //     .data-item-desc {
  //       color: #3de7c9;
  //       font-size: $lg-font-size;
  //       font-weight: 550;
  //       margin-top: 10px;
  //     }

  //     .dv-digital-flop {
  //       width: 100%;
  //       height: 30px;
  //       margin-top: 5px;
  //     }
  //   }
  // }

  .top-center-chart {
    height: 100%;
    display: grid;
    // grid-template-columns: 2fr 1fr;
    // grid-gap: 5px;
    // padding: 0 5px;
    // margin-right: 20px;

    .chart-item {
      // background-color: $theme-sub-color;
      // padding: 0 10px;
      .dv-scr-rank-board {
        // height: 82%;
        height: 100%;
        width: 100%;
      }

      // 这里实现动态等宽高
      .pond-section {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 100%;
        margin-top: 15px;

        .dv-water-level-pond {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
        }
      }

      .screen-top-header {
        height: $chart-header-height;

        .header-left {
          width: 10px;
        }

        .header-right {
          // width: calc(100% - 30px);

          .header-title {
            color: #fff;
            font-size: $base-font-size;
            cursor: pointer;
          }

          .dv-dec-3 {
            width: 50px;
            height: 20px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
